<script setup>
import {ref, onMounted,onBeforeUnmount,defineProps,onBeforeUpdate} from "vue"
// import animeFanJi1 from "./animeFanJi1.vue"
import {router} from "../router"
import { useRoute } from "vue-router"

import pause_white from "../../public/video/pause_white.svg"
import play_white from "../../public/video/play_white.svg"

const videoRef = ref(null)
const playBtnRef = ref(null)
const proessRef = ref(null)
const proessBox = ref(null)
const miniPlayBtnRef = ref(null)

const route = useRoute()

const videoTimeAll = ref(0)
const videoTimeNow = ref(0)

const videowucha = 70

//判断是否是初始化番剧链接
const isSetup = ref(true)

const videoUrlMaster = ref("")

//番剧选集选中class样式 - 变量
const fanji1_add = ref("ji_click")
const fanji2_add = ref("")
const fanji3_add = ref("")
const fanji4_add = ref("")
const fanji5_add = ref("")
const fanji6_add = ref("")
const fanji7_add = ref("")
const fanji8_add = ref("")
const fanji9_add = ref("")
const fanji10_add = ref("")
const fanji11_add = ref("")
const fanji12_add = ref("")

//

onMounted(()=>{
    // videoUrlMaster.value = props.videoUrl
    console.log(route.params)
})

onBeforeUpdate(()=>{
    
})





//组件更新前
onBeforeUpdate(()=>{
    // videoUrlMaster.value = props.videoUrl
    
})

/* window.onkeyup = (event) => {
    console.log(event.keyCode)
    if(event.keyCode == 32){
        //空格键
        if(videoRef.value.paused){
            videoRef.value.paly()
            playBtnRef.value.style.display = "none"
        }else{
            videoRef.value.pause() 
            playBtnRef.value.style.display = "block"
        }
    }
} */

/**
 * @fanName : 番名(简写)
 * @videoUrl : 视频地址
 * @videoUrl2 : 视频2地址
 * @videoUrl3 : 视频3地址
 * @fan1Url : 番剧1地址
 * @fan2Url : 番剧2地址
 * @fan3Url : 番剧3地址
 * @fan4Url : 番剧4地址
 * @fan5Url : 番剧5地址
 * @fan6Url : 番剧6地址
 * @fan7Url : 番剧7地址
 * @fan8Url : 番剧8地址
 * @fan9Url : 番剧9地址
 * @fan10Url : 番剧10地址
 * @fan11Url : 番剧11地址
 * @fan12Url : 番剧12地址
 */
const props = defineProps({
    fanName:{type:String},

    videoUrl:{type:String},
    videoUrl2:{type:String},
    videoUrl3:{type:String},

    fan1Url:{type:String},
    fan2Url:{type:String},
    fan3Url:{type:String},
    fan4Url:{type:String},
    fan5Url:{type:String},
    fan6Url:{type:String},
    fan7Url:{type:String},
    fan8Url:{type:String},
    fan9Url:{type:String},
    fan10Url:{type:String},
    fan11Url:{type:String},
    fan12Url:{type:String},
})

// console.log()

//组件销毁之前
onBeforeUnmount(()=>{
    videoRef.value.pause()
})

const player = async() => {
    if(videoRef.value.paused){
        videoRef.value.play()
        playBtnRef.value.style.display = "none"
        miniPlayBtnRef.value.src = pause_white
    }else{
        videoRef.value.pause()
        playBtnRef.value.style.display = "block"
        miniPlayBtnRef.value.src = play_white
    }
}

//视频更新
const videoTimeUpdate = async() => {
    // console.log(proessRef.value)
    videoTimeNow.value = TimeJiSuan(videoRef.value.currentTime)
    proessRef.value.style.width = await videoRef.value.currentTime/videoRef.value.duration*100 + '%'
}
const videoMouseDown = (event) => {
    // console.log(event.pageX)
    let len = event.pageX - proessBox.value.offsetLeft - videowucha
    let percent = len / proessBox.value.offsetWidth;
    proessRef.value.style.width = percent * (proessBox.value.offsetWidth) - 2 + "px";
    videoRef.value.currentTime = percent * videoRef.value.duration;
}
  
const videoKeyUp = (event) => {
    console.log(event.keyCode)
    if(event.keyCode == 32){
        //空格键
        if(videoRef.value.paused){
            videoRef.value.paly()
            playBtnRef.value.style.display = "none"
        }else{
            videoRef.value.pause() 
            playBtnRef.value.style.display = "block"
        }
    }
}

//视频时间计算
const TimeJiSuan = (time) => {
    let h,m,s
    if(time >= 60*60*60){
        h = time / 60 / 60^0 //^0:四舍五入整数化
        m = time / 60 % 60^0
        s = time % 60 % 60^0
        return h + ':' + m + ':' + s
    }else if(time >= 0 && time <60*60*60){
        m = time / 60 % 60^0
        s = time % 60 % 60^0
        return m + ':' + s
    }else{
        return "出错了"
    }
}

const videoCanPlay = () => {
    // videoTimeNow.value = TimeJiSuan(0)
    videoTimeAll.value = TimeJiSuan(videoRef.value.duration)
}
const videoPlaying = () => {
    
}

//番剧点击事件
const fanji1Btn = async() => {
    fanji1_add.value = "ji_click"
    fanji2_add.value = ""
    fanji3_add.value = ""
    fanji4_add.value = ""
    fanji5_add.value = ""
    fanji6_add.value = ""
    fanji7_add.value = ""
    fanji8_add.value = ""
    fanji9_add.value = ""
    fanji10_add.value = ""
    fanji11_add.value = ""
    fanji12_add.value = ""

    videoUrlMaster.value = props.fan1Url
    isSetup.value = false
    playBtnRef.value.style.display = "none"
    router.replace(`/anime-player/${props.fanName}/1`)
}
const fanji2Btn = async() => {
    fanji1_add.value = ""
    fanji2_add.value = "ji_click"
    fanji3_add.value = ""
    fanji4_add.value = ""
    fanji5_add.value = ""
    fanji6_add.value = ""
    fanji7_add.value = ""
    fanji8_add.value = ""
    fanji9_add.value = ""
    fanji10_add.value = ""
    fanji11_add.value = ""
    fanji12_add.value = ""

    videoUrlMaster.value = props.fan2Url
    isSetup.value = false
    playBtnRef.value.style.display = "none"

    router.replace(`/anime-player/${props.fanName}/2`)
}
const fanji3Btn = async() => {
    fanji1_add.value = ""
    fanji2_add.value = ""
    fanji3_add.value = "ji_click"
    fanji4_add.value = ""
    fanji5_add.value = ""
    fanji6_add.value = ""
    fanji7_add.value = ""
    fanji8_add.value = ""
    fanji9_add.value = ""
    fanji10_add.value = ""
    fanji11_add.value = ""
    fanji12_add.value = ""

    videoUrlMaster.value = props.fan3Url
    isSetup.value = false
    playBtnRef.value.style.display = "none"

    router.replace(`/anime-player/${props.fanName}/3`)
}
const fanji4Btn = async() => {
    fanji1_add.value = ""
    fanji2_add.value = ""
    fanji3_add.value = ""
    fanji4_add.value = "ji_click"
    fanji5_add.value = ""
    fanji6_add.value = ""
    fanji7_add.value = ""
    fanji8_add.value = ""
    fanji9_add.value = ""
    fanji10_add.value = ""
    fanji11_add.value = ""
    fanji12_add.value = ""

    videoUrlMaster.value = props.fan4Url
    isSetup.value = false
    playBtnRef.value.style.display = "none"
    router.replace(`/anime-player/${props.fanName}/4`)
}
const fanji5Btn = async() => {
    fanji1_add.value = ""
    fanji2_add.value = ""
    fanji3_add.value = ""
    fanji4_add.value = ""
    fanji5_add.value = "ji_click"
    fanji6_add.value = ""
    fanji7_add.value = ""
    fanji8_add.value = ""
    fanji9_add.value = ""
    fanji10_add.value = ""
    fanji11_add.value = ""
    fanji12_add.value = ""

    videoUrlMaster.value = props.fan5Url
    isSetup.value = false
    playBtnRef.value.style.display = "none"
    router.replace(`/anime-player/${props.fanName}/5`)
}
const fanji6Btn = async() => {
    fanji1_add.value = ""
    fanji2_add.value = ""
    fanji3_add.value = ""
    fanji4_add.value = ""
    fanji5_add.value = ""
    fanji6_add.value = "ji_click"
    fanji7_add.value = ""
    fanji8_add.value = ""
    fanji9_add.value = ""
    fanji10_add.value = ""
    fanji11_add.value = ""
    fanji12_add.value = ""

    videoUrlMaster.value = props.fan6Url
    isSetup.value = false
    playBtnRef.value.style.display = "none"

    router.replace(`/anime-player/${props.fanName}/6`)
}
const fanji7Btn = async() => {
    fanji1_add.value = ""
    fanji2_add.value = ""
    fanji3_add.value = ""
    fanji4_add.value = ""
    fanji5_add.value = ""
    fanji6_add.value = ""
    fanji7_add.value = "ji_click"
    fanji8_add.value = ""
    fanji9_add.value = ""
    fanji10_add.value = ""
    fanji11_add.value = ""
    fanji12_add.value = ""

    videoUrlMaster.value = props.fan7Url
    isSetup.value = false
    playBtnRef.value.style.display = "none"

    router.replace(`/anime-player/${props.fanName}/7`)
}
const fanji8Btn = async() => {
    fanji1_add.value = ""
    fanji2_add.value = ""
    fanji3_add.value = ""
    fanji4_add.value = ""
    fanji5_add.value = ""
    fanji6_add.value = ""
    fanji7_add.value = ""
    fanji8_add.value = "ji_click"
    fanji9_add.value = ""
    fanji10_add.value = ""
    fanji11_add.value = ""
    fanji12_add.value = ""

    videoUrlMaster.value = props.fan8Url
    isSetup.value = false
    playBtnRef.value.style.display = "none"

    router.replace(`/anime-player/${props.fanName}/8`)
}
const fanji9Btn = async() => {
    fanji1_add.value = ""
    fanji2_add.value = ""
    fanji3_add.value = ""
    fanji4_add.value = ""
    fanji5_add.value = ""
    fanji6_add.value = ""
    fanji7_add.value = ""
    fanji8_add.value = ""
    fanji9_add.value = "ji_click"
    fanji10_add.value = ""
    fanji11_add.value = ""
    fanji12_add.value = ""

    videoUrlMaster.value = props.fan9Url
    isSetup.value = false
    playBtnRef.value.style.display = "none"

    router.replace(`/anime-player/${props.fanName}/9`)
}
const fanji10Btn = async() => {
    fanji1_add.value = ""
    fanji2_add.value = ""
    fanji3_add.value = ""
    fanji4_add.value = ""
    fanji5_add.value = ""
    fanji6_add.value = ""
    fanji7_add.value = ""
    fanji8_add.value = ""
    fanji9_add.value = ""
    fanji10_add.value = "ji_click"
    fanji11_add.value = ""
    fanji12_add.value = ""

    videoUrlMaster.value = props.fan10Url
    isSetup.value = false
    playBtnRef.value.style.display = "none"

    router.replace(`/anime-player/${props.fanName}/10`)
}
const fanji11Btn = async() => {
    fanji1_add.value = ""
    fanji2_add.value = ""
    fanji3_add.value = ""
    fanji4_add.value = ""
    fanji5_add.value = ""
    fanji6_add.value = ""
    fanji7_add.value = ""
    fanji8_add.value = ""
    fanji9_add.value = ""
    fanji10_add.value = ""
    fanji11_add.value = "ji_click"
    fanji12_add.value = ""

    videoUrlMaster.value = props.fan11Url
    isSetup.value = false
    playBtnRef.value.style.display = "none"

    router.replace(`/anime-player/${props.fanName}/11`)
}
const fanji12Btn = async() => {
    fanji1_add.value = ""
    fanji2_add.value = ""
    fanji3_add.value = ""
    fanji4_add.value = ""
    fanji5_add.value = ""
    fanji6_add.value = ""
    fanji7_add.value = ""
    fanji8_add.value = ""
    fanji9_add.value = ""
    fanji10_add.value = ""
    fanji11_add.value = ""
    fanji12_add.value = "ji_click"

    videoUrlMaster.value = props.fan12Url
    isSetup.value = false
    playBtnRef.value.style.display = "none"

    router.replace(`/anime-player/${props.fanName}/12`)
}

//视频移入移出事件
const func1Ref = ref(null)
const videoMoveIn = (event) => {
    // console.log("鼠标移入")
    func1Ref.value.style.display = "block"
    // if(isMove.value){
    //     func1Ref.value.style.display = "block"
    // }else{
    //     func1Ref.value.style.display = "none"
    // }
    
}
const videoMoveOut = (event) => {
    // console.log("鼠标移出")
    func1Ref.value.style.display = "none"
}
//鼠标移动事件
const isMove = ref(false)
let timer = null
const videoMouseMove = async(event) => {
    isMove.value = true//移动时
    // console.log(isMove.value)
    timer = setTimeout(()=>{
        //静止后
        isMove.value = false
    },3000)
}

</script>

<template>
    <div class="videoMasterBox">
        <!-- {{ props.videoUrl }} -->
        <div class="videoMaster" v-if="props.videoUrl != ''" @mouseenter="videoMoveIn" @mouseleave="videoMoveOut">
            <video :src="props.videoUrl" ref="videoRef" autoplay @click="player()"
            @timeupdate="videoTimeUpdate()" @keyup="videoKeyUp" @mousemove="videoMouseMove"
            @canplay="videoCanPlay()" @playing="videoPlaying()"
             v-if="isSetup"></video>
            <video :src="videoUrlMaster" ref="videoRef" autoplay @click="player()"
            @timeupdate="videoTimeUpdate()" @keyup="videoKeyUp"
            @canplay="videoCanPlay()" @playing="videoPlaying()" v-else></video>
            <div class="playerImage">
                <img src="../../public/play.svg" alt="" ref="playBtnRef"/>
            </div>
            <div class="videoFunc1Box" ref="func1Ref">
                <div class="proessBox" ref="proessBox" @mousedown="videoMouseDown">
                    <div class="proess" ref="proessRef"></div>
                </div>
                <div class="playBtnBox">
                    <img :src="pause_white" alt="" ref="miniPlayBtnRef" @click="player"/>
                </div>
                <div class="videoTimeAll"><span @click="">{{videoTimeNow}}</span> / {{videoTimeAll}}</div>
            </div>
        </div>
        <div class="videoNotFound" v-else>
            <span>未找到番剧</span>
        </div>
        <!-- <div>测试{{props.fan3Url}}</div> -->
        <div class="videoFunc2Box">
            <div class="fanJi1_all">
                <div class="titleBox">
                    <span>{{"正片"}}</span>
                    <div class="checkBtn">
                        <img src="../../public/icons/anime/list_model1.svg" alt="">
                    </div>
                </div>
                
                <div class="ji1_6">
                    <div v-if="props.fan1Url != ''" class="fan1UrlBox">
                        <div class="fanji1" :class="fanji1_add" @click="fanji1Btn()">1</div>
                    </div>
                    <div v-else>第1话没有</div>
                    <div v-if="props.fan2Url != ''" class="fan2UrlBox">
                        <div class="fanji2" :class="fanji2_add" @click="fanji2Btn()">2</div>
                    </div>
                    <div v-if="props.fan3Url != ''" class="fan3UrlBox">
                        <div class="fanji3" :class="fanji3_add" @click="fanji3Btn()">3</div>
                    </div>
                    <div v-if="props.fan4Url != ''" class="fan4UrlBox">
                        <div class="fanji4" :class="fanji4_add" @click="fanji4Btn()">4</div>
                    </div>
                    <div v-if="props.fan5Url != ''" class="fan5UrlBox">
                        <div class="fanji5" :class="fanji5_add" @click="fanji5Btn()">5</div>
                    </div>
                    <div v-if="props.fan6Url != ''" class="fan6UrlBox">
                        <div class="fanji6" :class="fanji6_add" @click="fanji6Btn()">6</div>
                    </div>
                </div>
                <div class="ji7_12">
                    <div v-if="props.fan7Url != ''" class="fan7UrlBox">
                        <div class="fanji7" :class="fanji7_add" @click="fanji7Btn()">7</div>
                    </div>
                    <div v-if="props.fan8Url != ''" class="fan8UrlBox">
                        <div class="fanji8" :class="fanji8_add" @click="fanji8Btn()">8</div>
                    </div>
                    <div v-if="props.fan9Url != ''" class="fan9UrlBox">
                        <div class="fanji9" :class="fanji9_add" @click="fanji9Btn()">9</div>
                    </div>
                    <div v-if="props.fan10Url != ''" class="fan10UrlBox">
                        <div class="fanji10" :class="fanji10_add" @click="fanji10Btn()">10</div>
                    </div>
                    <div v-if="props.fan11Url != ''" class="fan11UrlBox">
                        <div class="fanji11" :class="fanji11_add" @click="fanji11Btn()">11</div>
                    </div>
                    <div v-if="props.fan12Url != ''" class="fan12UrlBox">
                        <div class="fanji12" :class="fanji12_add" @click="fanji12Btn()">12</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.videoMasterBox{
    width: 100%;
    height: 90%;
    /* background-color: red; */
    display: flex;
}
.videoMaster{
    width: 73%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background-color: red; */
}
.videoNotFound{
    width: 73%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.videoNotFound span{
    font-size: 50px;
    width: 90%;
    height: 90%;
    background: #000;
    /* border-radius: 15px; */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    /* font-weight: 600; */
}
.videoMaster video{
    width: 90%;
    height: 90%;
    background: #000;
    /* border-radius: 15px; */
}
.videoTimeAll{
    position: absolute;
    left: 6%;
    bottom: 52%;
    width: 10%;
    height: 10%;
    color: #fff;
    user-select: none;

}
.videoFunc1Box{
    position: absolute;
    left: 3.7%;
    top: 79.5%;
    width: 66.5%;
    height: 7%;
    display: none;
}
.videoFunc2Box{
    width: 26%;
    height: 100%;
}

.playBtnBox{
    position: absolute;
    left: 1%;
    top: 20%;
    width: 4%;
    height: 65%;
}

.playBtnBox img{
    width: 100%;
    height: 100%;
    cursor: pointer;
    user-select: none;
}

.playerImage{
    position: absolute;
    left: 62%;
    top: 68%;
    width: 10%;
    height: 10%;
    display: flex;
    align-items: center;
}
.playerImage img{
    width: 80%;
    height: 80%;
    display: none;
    user-select: none;
}

.proessBox{
    position: absolute;
    left: 10px;
    top: -3%;
    width: 97%;
    height: 6%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    transition: all 0.3s;
    z-index: 5;
    border-radius: 10px;
    cursor: pointer;
}
.proessBox:hover{
    height: 6%;
}
.proess{
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background:skyblue;
    border-radius: 10px;
}


.fanJi1_all{
    position: absolute;
    left: 71%;
    top: 10.5%;
    width: 28.5%;
    height: 25%;
    background: rgba(200, 200, 200, 1);
    border-radius: 15px;
}

.titleBox{
    width: 100%;
    height: 20%;
    display: flex;
    
}
.titleBox span{
    margin-left: 10px;
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: 600;
    user-select: none;
}
.checkBtn{
    position: absolute;
    right: 15%;
    top: 5%;
    width: 10%;
    height: 15%;
    display: flex;
    cursor: pointer;
    user-select: none;
}
.checkBtn img{
    width: 100%;
    height: 100%;
}
.ji1_6{
    width: 100%;
    height: 40%;
    display: flex;
    align-items: center;
    /* background-color: red; */
}
.ji1_6 .fan1UrlBox,
.ji1_6 .fan2UrlBox,
.ji1_6 .fan3UrlBox,
.ji1_6 .fan4UrlBox,
.ji1_6 .fan5UrlBox,
.ji1_6 .fan6UrlBox{
    /* margin-left: 10px; */
    width: 16.666%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background-color: red; */
}
.ji7_12{
    width: 100%;
    height: 40%;
    display: flex;
    align-items: center;
    /* background-color: skyblue; */
}
.ji7_12 .fan7UrlBox,
.ji7_12 .fan8UrlBox,
.ji7_12 .fan9UrlBox,
.ji7_12 .fan10UrlBox,
.ji7_12 .fan11UrlBox,
.ji7_12 .fan12UrlBox{
    /* margin-left: 10px; */
    width: 16.666%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background-color: skyblue; */
}

.fanji1,
.fanji2,
.fanji3,
.fanji4,
.fanji5,
.fanji6,
.fanji7,
.fanji8,
.fanji9,
.fanji10,
.fanji11,
.fanji12{
    width: 80%;
    height: 80%;
    background: #fff;
    border-radius: 5px;
    cursor: pointer;
    border: 1px solid #fff;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
}

.fanji1:hover,
.fanji2:hover,
.fanji3:hover,
.fanji4:hover,
.fanji5:hover,
.fanji6:hover,
.fanji7:hover,
.fanji8:hover,
.fanji9:hover,
.fanji10:hover,
.fanji11:hover,
.fanji12:hover{
    color: #fff;
    border: 1px solid rgb(0,161,214);
    background: rgba(0,161,214,0.3);
}
.ji_click{
    color: #fff;
    background: rgb(0,161,214);
    border: 1px solid rgb(0,161,214);
}
</style>